<template>
  <h1>我的成绩</h1>
  <el-table :data="paginatedTableData" style="width: 100%">
    <el-table-column prop="examName" label="考试名称" />
    <el-table-column prop="examTime" label="考试时间" />
    <el-table-column prop="logicScore" label="逻辑得分" />
    <el-table-column prop="passScore" label="及格分数" />
    <el-table-column prop="totalScore" label="总得分" />
    <el-table-column label="是否及格">
      <template v-slot="scope">
        <span
          :style="{
            color:
              scope.row.totalScore >= scope.row.passScore ? 'green' : 'red',
          }"
        >
          {{ scope.row.totalScore >= scope.row.passScore ? '及格' : '不及格' }}
        </span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot="scope">
        <el-button type="primary" @click="handleAction(scope.row.examId)"
          >详情</el-button
        ><el-button type="danger" @click="handleDelete(scope.row.examId)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <div class="demo-pagination-block">
    <div class="demonstration">分页</div>
    <el-pagination
      v-model:current-page="state.page.pageNum"
      v-model:page-size="state.page.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalRecords"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { getExamInfo, ExamRecords } from '@/api/ExamOnline/MyScore'
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import type { ComponentSize } from 'element-plus'

const state = reactive({
  examInfo: [],
  examRecords: [],
  page: {
    pageNum: 1,
    pageSize: 10,
    total: 0, // 总记录数
  },
  MyGrades: {
    pageNo: 1,
    pageSize: 999,
    username: localStorage.getItem('username') || '',
  },
})
const background = ref(false)
const disabled = ref(false)
const size = ref<ComponentSize>('default')

const totalRecords = computed(() => state.examRecords.length)

const paginatedTableData = computed(() => {
  const start = (state.page.pageNum - 1) * state.page.pageSize
  const end = state.page.pageNum * state.page.pageSize
  return state.examRecords.slice(start, end).map((record) => {
    const examInfo =
      state.examInfo.find((info) => info.examId === record.examId) || {}
    return {
      ...record,
      examName: examInfo.examName,
      passScore: examInfo.passScore,
    }
  })
})

const router = useRouter()

async function getMyExams() {
  try {
    const { data } = await getExamInfo()
    state.examInfo = data.data
    console.log(state.examInfo)
  } catch (error) {
    console.error('Error fetching exam info:', error)
  }
}

async function getMyExamRecords() {
  try {
    const { data } = await ExamRecords(state.MyGrades)
    state.examRecords = data.data.examRecords
    state.page.total = data.data.examRecords.length // 更新总记录数
    console.log(state.examRecords)
  } catch (error) {
    console.error('Error fetching exam records:', error)
  }
}

function handleAction(examId) {
  // 添加你需要的操作逻辑
  router.push(`/home/result/${examId}`)
}

const handleSizeChange = (val: number) => {
  state.page.pageSize = val
  state.page.pageNum = 1 // 每次改变页面大小时，将页码重置为第一页
}

const handleCurrentChange = (val: number) => {
  state.page.pageNum = val
}
onMounted(() => {
  getMyExams()
  getMyExamRecords()
})
</script>

<style scoped lang="less"></style>